<template>
    <view
		class="gy-page"
		:class="{disable: !props.scroll}"
		:style="{background: props.bgColor, paddingBottom: props.paddingBottom || (system.isIos() ? '218rpx' : '150rpx')}">

		<view
            v-if="tip.show"
            class="gy-page-tip"
            :class="[tip.visible ? 'hide' : '', tip.type]">
            <view class="gy-page-tip-text">{{ tip.msg }}</view>
            <view v-if="tip.showClose" class="gy-page-tip-close gy_icon_close" @click.stop="hideTipFn"></view>
        </view>

		<view
			v-if="props.loading"
			class="gy-page-load"
			:style="{background: props.bgColor, paddingTop: props.loadingTop , height: `calc(100vh - ${ props.loadingTop })`}">
			<view class="loading-model">
			    <com-loading-icon :size="80" />
			</view>
		</view>

        <slot></slot>

        <com-divider v-if="props.bottomTip" :text="props.bottomTip" lineColor="#f3f3f3" />

        <com-model ref="loadingModel" v-if="loading.show" :closeOnClickMask="false" @close="loading.show = false">
            <view class="loading-model">
				<image class="loading-model-image" :src="proxy.utils.image.fullPath('008e97b1c58bb868035f8023444b245fae4691b42264e6385c241asjlkfk123.gif')" mode="widthFix"></image>
                <view class="loading-model-tip">{{ loading.msg }}</view>
            </view>
        </com-model>

		<com-model ref="confirmModel" v-if="confirm.show" :closeOnClickMask="confirm.closeOnClickMask" @close="closeConfirmFn">
		    <view class="confirm-model">
		        <view class="confirm-title">{{ confirm.title }}</view>
				<view class="confirm-content" v-html="confirm.content"></view>
				<view class="confirm-tip" v-if="confirm.tip">{{confirm.tip}}</view>
				<view v-if="confirm.action" class="confirm-btns">
					<com-button type="secondary" @click.stop="cancelConfirmFn">{{ confirm.cancelBtnText }}</com-button>
					<com-button @click.stop="submitConfirmFn">{{ confirm.confirmBtnText }}</com-button>
				</view>
		    </view>
		</com-model>

        <com-model ref="advertModel" v-if="advert.show" :closeOnClickMask="false" @close="advert.show = false">
            <view class="advert-model">
                <view class="advert-title">{{ advert.title }}</view>
                <view class="advert-body">
                	<view class="advert-item" v-for="(item,index) in advert.list" :key="index">{{ item }}</view>
                </view>
                <com-button mode="block" @click.stop="hideAdvertFn">知道了</com-button>
            </view>
		</com-model>

		<com-page-floating-nav v-if="props.showFloatingNav" :myCarProjectNumber="props.myCarProjectNumber" />
		
		<com-customer v-if="props.showCustomer" />

    </view>
</template>

<script lang="ts" setup>

    import {
		ref,
		computed,
		onMounted,
		onBeforeMount,
		getCurrentInstance
	} from "vue";

	import GyPageFloatingNav from "./components/com-page-floating-nav.vue";

	import system from "@/utils/system/index.js";

    interface PageTip {
        msg: string;
        duration?: number;
        type?: string;
        showClose?: boolean;
        autoClose?: boolean;
    }
	interface PageConfirm {
	    title: string;
	    content: string;
	    tip: string;
		action: boolean;
		closeOnClickMask: boolean;
	    cancelBtnText?: string;
	    confirmBtnText?: string;
	    cancel?: Function,
	    confirm: Function
	}

	const { proxy }: any = getCurrentInstance();

	const loadingModel: any = ref(null);
	const confirmModel: any = ref(null);
	const advertModel: any = ref(null);

    const props = defineProps({
		scroll: {
        	type: Boolean,
			default: true
        },
		loading: {
        	type: Boolean,
			default: false
        },
		loadingTop: {
			type: String,
			default: "0rpx"
		},
        bgColor: {
        	type: String
        },
    	bottomTip: {
    		type: String,
    		default: ""
    	},
		paddingBottom: {
    		type: String,
    		default: ""
    	},
		showFloatingNav: {
			type: Boolean,
			default: true
		},
		showCustomer: {
			type: Boolean,
			default: true
		},
		myCarProjectNumber: {
			type: Number,
			default: 0
		}
    });

	const patientList = computed(() => proxy.store.patient.list);

    const tip = ref({
        show: false,
        visible: false,
        msg: "",
        type: "",
        duration: 3000,
        showClose: true,
        timer: null as any,
        timer1: null as any
    });
    const loading = ref({
        show: false,
        msg: "加载中"
    });
	const confirm = ref({
	    show: false,
		title: "",
		tip: "",
	    content: "",
		action: true,
		closeOnClickMask: false,
		cancelBtnText: "取消",
		confirmBtnText: "确认",
		cancel: null as any,
		confirm: null as any
	});
    const advert = ref({
        show: false,
		title: "注意事项",
        list: [] as Array<string>,
        callback: null as any
    });

    function showTipFn(options: PageTip){
        clearTimeout(tip.value.timer);
        clearTimeout(tip.value.timer1);
        tip.value = {
            show: true,
            visible: false,
            msg: options.msg,
            type: options.type || 'info',
            duration: options.duration || 3000,
            showClose: options.showClose || true,
            timer: null,
            timer1: null
        }
		if(tip.value.type === "error"){
			proxy.utils.log.error(options.msg);
		}
        if(options.autoClose){
            tip.value.timer = setTimeout(() => {
                hideTipFn();
            }, tip.value.duration)
        }
    }
    function hideTipFn(){
        tip.value.visible = true;
        try{
            tip.value.timer1 = setTimeout(() => {
            	tip.value.show = false;
            }, 500)
            clearTimeout(tip.value.timer);
            clearTimeout(tip.value.timer1);
        }catch(err: any){
            console.log(err)
        }
    }

    function showLoadingFn(msg?: string){
        loading.value = {
            show: true,
            msg: msg || "加载中"
        }
    }
    function hideLoadingFn(){
		loadingModel.value?.closeFn();
    }

    function showAdvertFn(title: string, infos: Array<string>, callback?: Function){
        advert.value = {
            show: true,
			title: title || "注意事项",
            list: infos || [],
            callback: callback || null
        }
    }
    function hideAdvertFn(){
		if(advert.value.callback){
			advert.value.callback();
		}
		advertModel.value?.closeFn();
    }

	function showConfirmFn(options: PageConfirm){
	    confirm.value = {
	        show: true,
	        title: options.title,
	        tip: options.tip,
	        content: options.content,
			action: Object.prototype.toString.call(options.action).slice(8, -1).toLowerCase() === "boolean" ? options.action : true,
			closeOnClickMask: Object.prototype.toString.call(options.closeOnClickMask).slice(8, -1).toLowerCase() === "boolean" ? options.closeOnClickMask : false,
	        cancelBtnText: options.cancelBtnText || "取消",
	        confirmBtnText: options.confirmBtnText || "确认",
	        cancel: options.cancel || null,
	        confirm: options.confirm || null
	    }
	}
	function closeConfirmFn(){
		confirm.value.show = false;
	    if(confirm.value.cancel){
			confirm.value.cancel()
		}
	}
	function cancelConfirmFn(){
		confirmModel.value?.closeFn();
	    if(confirm.value.cancel){
			confirm.value.cancel()
		}
	}
	function submitConfirmFn(){
		confirmModel.value?.closeFn();
	    if(confirm.value.confirm){
			confirm.value.confirm()
		}
	}

	onBeforeMount(() => {
		if(props.bgColor && props.bgColor.startsWith("linear-gradient") && props.bgColor.indexOf("#e2ebf5") !== -1){
			uni.setNavigationBarColor({
				frontColor: "#000000",
			    backgroundColor: '#e2ebf5'
			})
		}
	});

	onMounted(() => {
		if(uni.getStorageSync('system-userinfo') && patientList.value.length === 0){
			proxy.store.initPatientList();
		}
	});

    defineExpose({
        tip: {
            show: showTipFn,
            hide: hideTipFn
        },
        loading: {
            show: showLoadingFn,
            hide: hideLoadingFn
        },
        advert: showAdvertFn,
		confirm: showConfirmFn
    });

</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>
	.gy-page{
	    padding-top: 1rpx;
	    min-height: 100vh;
	    background-color: var(--gy-page-bg-color);
	    .gy-page-tip{
	        @include sticky(0);
			z-index: 100;
	        width: 100%;
	        padding: 0 20rpx;
	        @include flex-center-center;
	        animation: gy-page-tip-show .3s;
	        animation-fill-mode: forwards;
	        .gy-page-tip-text{
	            width: calc(100% - 50rpx);
	            padding: 10rpx;
	            font-size: var(--gy-font-size-base);
	        }
	        .gy-page-tip-close{
	            @include flex-center-center;
	            width: 50rpx;
	            height: 50rpx;
	            font-size: var(--gy-font-size-small);
	        }
	    }
	    .hide{
	    	animation: gy-page-tip-hide .3s;
	    	animation-fill-mode: forwards;
	    }
	    .gy-page-tip.primary{
	        color: var(--gy-color-primary);
	        background: #ecf5ff;
	    }
	    .gy-page-tip.success{
	        color: var(--gy-color-success);
	        background: #f0f9eb;
	    }
	    .gy-page-tip.warning{
	        color: var(--gy-color-warning);
	        background: #fdf6ec;
	    }
	    .gy-page-tip.error{
	        color: var(--gy-color-error);
	        background: #fef0f0;
	    }
	    .gy-page-tip.info{
	        color: var(--gy-text-color-regular);
	        background: #f4f4f5;
	    }
	    @keyframes gy-page-tip-show {
	    	from {
	    		height: 0px;
	    	}
	    	to {
	    		height: 90rpx;
	    	}
	    }
	    @keyframes gy-page-tip-hide {
	    	from {
	    		opacity: 1;
	    		height: 90rpx;
	    	}
	    	to {
	    		opacity: 0;
	    		height: 0px;
	    	}
	    }

		.gy-page-load{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99999;
			width: 100%;
			height: 100vh;
			background-color: var(--gy-page-bg-color);
			@include flex-center-center;
			padding-bottom: 600rpx;
		}
	}

	.gy-page.disable{
		padding: 0 !important;
	    overflow: hidden !important;
	    height: 100vh !important;
	}

	.loading-model{
		width: 150rpx;
	    height: 150rpx;
	    @include flex-center-center;
	    flex-direction: column;
		.loading-model-image{
			display: block;
			width: 40px;
		}
	    .loading-model-tip{
	        margin-top: 8rpx;
	        font-size: var(--gy-font-size-small);
	        color: var(--gy-text-color-secondary);
	    }
	}
	.confirm-model{
		width: 550rpx;
		background: linear-gradient(180deg, #D4E3FC 0%, #FEFEFE 38%, #FFFFFF 100%);
		padding: 50rpx;
		.confirm-title{
			font-size: var(--gy-font-size-large);
			font-weight: bold;
			text-align: center;
		}
		.confirm-content{
			font-size: var(--gy-font-size-base);
			color: var(--gy-text-color-placeholder);
			padding: 30rpx 0 50rpx 0;
			text-align: center;
		}
		.confirm-btns{
			width: 100%;
			@include flex-between-center;
			:deep(.gy-button){
				display: flex !important;
				width: 185rpx !important;
				height: 70rpx;
				border-radius: 35rpx;
				padding: 0 30rpx;
				font-size: 30rpx;
			}
		}
	}
	.advert-model{
		width: 500rpx;
	    background: linear-gradient(180deg, #D4E3FC 0%, #FEFEFE 38%, #FFFFFF 100%);
	    padding: 0 50rpx 60rpx 50rpx;
	    color: var(--gy-text-color-primary);
	    .advert-title{
	        font-size: var(--gy-font-size-large);
	        line-height: 140rpx;
	        font-weight: bold;
	        text-align: center;
	    }
		.advert-body{
			max-height: 50vh;
			overflow: auto;
			.advert-item{
			    margin-top: 10rpx;
			    font-size: var(--gy-font-size-medium);
			}
		}
	    :deep(.gy-button){
	        margin-top: 60rpx;
	    }
	}
	
	.confirm-tip{
		font-size: 29rpx;
		    width: 80%;
		    text-align: center;
		    margin: auto;
		    line-height: 45rpx;
		    color: #2196F3;
	}

</style>
